<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js动画</title>
	<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
	<transition
			@before-enter="beforehandleenter"
			@enter="handleEnter"
			@after-enter="afterEnter"
	        name="fade"
			enter-active-class="active"
			leave-active-class="leave"
	>
		<div v-show="seen">hello world</div>
	</transition>
	<button @click="handleclick">change</button>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			seen:true
		},
		methods:{
			handleclick:function(){
				this.seen = !this.seen
			},
			beforehandleenter:function(el){
            el.style.color = "red"
			},
			handleEnter:function(el,done){
             setTimeout(()=>{
             el.style.color = "pink"
             },2000)
			 setTimeout(()=>{
              done()
			 },4000)
			},
			afterEnter:function(el){
             el.style.color = "black"
			}
		}
	})
</script>
</body>
<!--

动画生命周期钩子
显示状态之前
@before-enter="" 进入之前
显示时
@enter="handleEnter"
done()告诉Vue动画执行完毕,可用定时器限制动画时常
显示后
@after-enter="afterEnter"
leave和上面同理,enter改为leave即可用法一样

-->
</html>